<template>
  <div class="app-container">
    <div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :rules="rules"
        size="small"
        :inline="true"        
        label-width="85px"
      >
        <el-row  class="queryform">
          <el-col :span="6">
            <el-form-item label="日期" prop="startDate" >
              <el-date-picker
                clearable
                v-model="queryParams.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6">
            <el-form-item label="结束日期" prop="endDate" >
              <el-date-picker
                clearable
                v-model="queryParams.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="查询选项" prop="saleState">
              <el-select v-model="selectParams" placeholder="请选择查询选项" clearable>
                <el-option v-for="dict in selectedYpInfoColumns" :key="dict.paraValue" :label="dict.paraName"
                :value="dict.paraValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="选择图形" prop="changeType" >
              <el-select v-model="changeType" placeholder="请选择需要图形" clearable>
              <el-option label="折线图" value="line"></el-option>
              <el-option label="柱状图" value="bar"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

      <el-col :span="8">
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>        
      </el-form-item>
      </el-col> 
      </el-row>
        <div>
      <span><h1><center>{{ time }}秦皇岛海域{{ selectParamsName }}折线图</center></h1></span>
    </div>
    <div
      id="seaPieLine"
      style="width: 1400px; height: 600px; margin: 0 auto"
    ></div>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as Echarts from "echarts";
import { listSeaData } from "@/api/seaTotal/seaData";
export default {
  name: "seaPieLine",
  data() {
    return {
      time: "2022-05-01",
      xdata: [],
      ydata: [],
      changeType: "line",
      selectParams: "significantWavHeight",
      selectParamsName:"有效波高",
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        startDate: "2022-05-01",
        endDate: "2022-05-01",
        tenAirPressure: null,
        tenAirTemperature: null,
        tenAirHumidity: null,
        atenWindSpeed: null,        
        btenWindSpeed: null,        
        significantWavHeight: null,
        validityPeriod: null,
        averageWaveHeight: null,
        averagePeriod: null,
        waveDirection: null,
        waveNumber: null,
        currentWaterTemperature: null,
        warmSaltWaterTemperature: null,
        independentWaterTemperature: null,
        waterQualityAndTemperature: null,
        salinity: null,
        oneCurrentVelocity: null,
        twoCurrentVelocity: null,
        threeCurrentVelocity: null,
        fourCurrentVelocity: null,
        fiveCurrentVelocity: null,
      },
       //所有选项
       selectedYpInfoColumns: [
       {
        paraValue: 'tenAirPressure',
        paraName: '气压'
        },{
        paraValue: 'tenAirTemperature',
        paraName: '气温'
        },{
        paraValue: 'tenAirHumidity',
        paraName: '湿度'
        },{
        paraValue: 'atenWindSpeed',
        paraName: 'A风速'
        },{
        paraValue: 'btenWindSpeed',
        paraName: 'B风速'
        },{
        paraValue: 'significantWavHeight',
        paraName: '有效波高'
        },{
        paraValue: 'validityPeriod',
        paraName: '有效周期'
        },{
        paraValue: 'averageWaveHeight',
        paraName: '平均波高'
        },{
        paraValue: 'averagePeriod',
        paraName: '平均周期'
        },{
        paraValue: 'waveDirection',
        paraName: '波向'
        },{
        paraValue: 'waveNumber',
        paraName: '波数'
        },{
        paraValue: 'currentWaterTemperature',
        paraName: '海流水温'
        },{
        paraValue: 'warmSaltWaterTemperature',
        paraName: '温盐水温'
        },{
        paraValue: 'independentWaterTemperature',
        paraName: '独立水温'
        },{
        paraValue: 'waterQualityAndTemperature',
        paraName: '水质水温'
        },{
        paraValue: 'salinity',
        paraName: '盐度'
        },{
        paraValue: 'oneCurrentVelocity',
        paraName: '第1层海流流速'
        },{
        paraValue: 'twoCurrentVelocity',
        paraName: '第2层海流流速'
        },{
        paraValue: 'threeCurrentVelocity',
        paraName: '第3层海流流速'
        },{
        paraValue: 'fourCurrentVelocity',
        paraName: '第4层海流流速'
        },{
        paraValue: 'fiveCurrentVelocity',
        paraName: '第5层海流流速'
        }
        ],
      rules: {
        startDate: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur",
          },
        ],
        // endDate: [
        //   {
        //     required: true,
        //     message: "请选择结束时间",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  created() {
    //this.openLoading();
    this.getList();
  },
  mounted() {
    setTimeout(() => {
      this.initEcharts();
    }, 2000);
  },
  methods: {
    getList() {
      this.xdata=[];
      let num = 10;
      let nowTime=1;
      this.loading = true;
      this.time = this.queryParams.startDate; 
       // 设置 endDate 为 startDate 的日期但时间为 23:59:59
      if(this.queryParams.startDate){
        const startDate = new Date(this.queryParams.startDate);
        startDate.setHours(23, 59, 59, 999);
        this.queryParams.endDate = startDate.toISOString().split('T')[0] + ' 23:59:59';    
      } 
      
      console.log(this.queryParams.endDate);
      listSeaData(this.queryParams).then((response) => {   
        //const date=response.rows.filter((f)=>f.date).map((m)=>m.date)
        //this.xdata = date;         
        const yvalue=response.rows.map((m)=>m[this.selectParams]);         
        this.ydata = yvalue;        
        
        for (let i = 1; i < yvalue.length; i++) {
            let hourse = num / 60;          
            this.xdata.push(hourse.toFixed(1)+"小时")
            num = num+10             
            nowTime++             
        }      
        setTimeout(() => {
          this.initEcharts();
        }, 500);
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载折线图数据，请稍候！");
    },
    initEcharts() {
      this.myChart2 = Echarts.init(document.getElementById("seaPieLine"));
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        //console.log("DATE",new Date(oneDay))
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      this.myChart2.setOption({
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "center"
          
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xdata,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 2,
          },
        ],
        series: [
          {
            name: this.selectParamsName,
            type: this.changeType,
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            areaStyle: {
              color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 158, 68)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 70, 131)",
                },
              ]),
            },
            data: this.ydata,
          },
        ],
      });
    },
     /** 搜索按钮操作 */
     handleQuery() {                  
      this.selectParamsName = this.selectedYpInfoColumns.filter((f)=>f.paraValue===this.selectParams)[0].paraName;                
      this.getList();
    },
     /** 重置按钮操作 */
     resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
  },
};
</script>
